import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Steps } from "antd";
import queryString from "query-string";
import Bottom from "../../components/UserBottom";
import Header from "../../components/UserHeader";
import style from "../Forgetpassword/style.less";
import EmailPsd from "../../components/EmailPsd";
import EmailTemp from "../../components/EmailTemp";
import ForgetEmail from "../../components/ForgetEmail";
import Prompt from "../../components/Prompt";
import Process from "../../components/Process";
const Step = Steps.Step;

class EmailPassword extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      stepInfo: [
        { num: "01", title: "邮箱验证" },
        { num: "02", title: "设置新密码" }
      ],
      one_stepSuccess: true,
      email: "",
      captcha: ""
    };
  }
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  handleSubmit = (email, captcha) => {
    this.setState({
      email,
      captcha,
      one_stepSuccess: false
    });
  };

  componentDidMount() {
    const { key = 0 } = queryString.parse(window.location.search);
    this.setState({
      current: Number(key)
    });
  }

  render() {
    const { current, stepInfo, one_stepSuccess, email, captcha } = this.state;
    const steps = [
      {
        title: <Process {...stepInfo[0]} />,
        content: one_stepSuccess ? (
          <ForgetEmail handleSubmit={this.handleSubmit} />
        ) : (
          <EmailTemp
            handleSubmit={this.handleSubmit}
            email={email}
            captcha={captcha}
          />
        )
      },
      {
        title: <Process {...stepInfo[1]} />,
        content: <EmailPsd handleSubmit={this.handleSubmit} />
      }
    ];
    return (
      <div className={style.text}>
        <div className={style.Head}>
          <Header title="邮箱找回密码" type="2" />
          <div className={style.fgPassword}>
            <div className={style.dash_areaone} />
            <div className={style.dash_areatwo} />
            <div>
              <Steps current={current}>
                {steps.map((item, index) => (
                  <Step key={index} title={item.title} />
                ))}
              </Steps>
              <div className="steps-content">
                {steps[this.state.current].content}
              </div>
            </div>
          </div>
        </div>
        <div className={style.bottom}>
          <Prompt />
        </div>
        <Bottom />
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {};
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {};
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(EmailPassword);
